<template>
  <div class="curve">
    <div class="workDate">
      <el-date-picker
        v-model="value1"
        class="work_date"
        value-format="yyyy-MM-dd HH:mm:ss "
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="changeTime"
        ref="referenceRef"
      ></el-date-picker>
    </div>
    <el-tabs id="el-tab" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in montiorList"
        :label="item.monitorName"
        :name="item.monitorType"
        :key="item.monitorType"
      >
        <img :src="nodatasrc" alt class="nodataImg" />
      </el-tab-pane>
      <!-- <el-tab-pane label="电压曲线" name="1">
        <img :src="nodatasrc" alt class="nodataImg" />
      </el-tab-pane>
      <el-tab-pane label="电流曲线" name="2">
        <img :src="nodatasrc" alt class="nodataImg" />
      </el-tab-pane>
      <el-tab-pane label="总功率曲线" name="4">
        <img :src="nodatasrc" alt class="nodataImg" />
      </el-tab-pane>
      <el-tab-pane label="各路功率曲线" name="5">
        <img :src="nodatasrc" alt class="nodataImg" />
      </el-tab-pane> -->
    </el-tabs>
    <div id="eschars"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { EleResize } from "../../utils/esresize";
import { getCurve, getMontior } from "../../utils/api";
export default {
  data() {
    return {
      activeName: "",
      myChart: null,
      // 设备id
      deviceId: "",
      // 定时器
      timer: null,
      startTime: "",
      endTime: "",
      nodatasrc: "",
      // 时间
      value1: "",
      tabType: "",
      until: "",
      cureTime: "",
      offLine: "",
      montiorList: []
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.handlergetCurve(this.activeName);
    }, 60000);
  },
  methods: {
    handleClick(tab, event) {
      this.handlergetCurve(tab.name);
    },
    //动态获取温控参数
    handlergetMontior() {
      const params = {
        deviceId: this.deviceId
      };
      this.postRequest(getMontior, params).then(res => {
        if (res.code == 200) {
          this.montiorList = res.data;
          this.activeName = res.data[0].monitorType;
          this.handlergetCurve(this.activeName);
        }
      });
    },
    // 曲线的数据
    handlergetCurve(type) {
      this.tabType = type;
      const node = document.getElementById("eschars");
      this.myChart = echarts.init(node);
      this.myChart.clear();
      const paramas = {
        deviceId: this.deviceId,
        monitorType: Number(type),
        startTime: this.startTime,
        endTime: this.endTime
      };
      this.postRequest(getCurve, paramas).then(res => {
        if (res.code == 200) {
          const result = res.data;
          this.cureTime = result.time;
          const color = ["#a048ff", "#0077f8", "#e5482c"];
          let series = [];
          let curveName = [];
          let resultArr = [];
          this.nodatasrc = "";
          if (
            !result ||
            result === "" ||
            result === null ||
            result.length === 0
          ) {
            curveName = [];
            series = [];
            resultArr = [];
            this.myChart.dispose();
            this.nodatasrc = require("../../assets/images/zh/nodata.png");
            // this.$message.error("暂无数据")
          } else {
            //循环对象 返回的结果是数组
            resultArr = Object.values(result.curve);
            //循环数组 拿到 名字
            curveName = resultArr.map(v => v.name);
          }
          //循环数组 拿到不同的温度
          for (let i = 0; i < resultArr.length; i++) {
            this.until = resultArr[i].unit;
            this.offLine = resultArr[i].offline;
            series.push({
              name: resultArr[i].name,
              type: "line",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: color[i]
                  }
                }
              },
              markPoint: {
                data: [{ type: "max", name: "最大值" }],
                symbol: "pin",
                itemStyle: {
                  color: color[i]
                }
              },
              data: resultArr[i].data,
              symbol: "none", //这句就是去掉点的
              smooth: true //这句就是让曲线变平滑的
            });
          }
          const option = {
            tooltip: {
              trigger: "axis",
              formatter: params => {
                const arr = params.map(
                  v => v.axisValue + v.seriesName + ":" + v.value + this.until
                );
                return arr.join("<br/>");
              }
            },
            color,
            legend: {
              left: "50",
              data: curveName
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            toolbox: {
              iconStyle: {
                color: "#a048ff"
              }
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: result.time
            },
            yAxis: {
              type: "value"
            },
            series
          };
          this.myChart.setOption(option);
          const listener = () => {
            this.myChart.resize();
          };
          EleResize.on(node, listener);
        }
      });
    },
    // 点击选择时间调用的函数
    changeTime(value) {
      if (this.value1 == "" || this.value1 == null || this.value1 == []) {
        this.startTime = "";
        this.endTime = "";
        this.handlergetCurve(this.tabType);
        this.timer = setInterval(() => {
          this.handlergetCurve(this.tabType);
        }, 60000);
      } else {
        clearInterval(this.timer);
        this.startTime = value[0];
        this.endTime = value[1];
        this.handlergetCurve(this.tabType);
      }
    }
  },
  destroyed() {
    this.myChart = null;
    clearInterval(this.timer);
  },
  created() {
    const deviceInfo = JSON.parse(
      window.sessionStorage.getItem("facilityData")
    );
    if (window.sessionStorage.getItem("deviceId") == null) {
      this.deviceId = deviceInfo.id;
    } else {
      this.deviceId = window.sessionStorage.getItem("deviceId");
    }
    this.handlergetMontior();
    // const timeResult = JSON.parse(window.sessionStorage.getItem("partTime"));
    // console.log(time)
    // this.startTime = timeResult.start_time;
    // this.endTime = timeResult.end_time;
  }
};
</script>

<style lang="less" scoped>
.curve {
  #eschars {
    width: 80%;
    height: 350px;
    margin-left: 30px;
    margin-bottom: -150px;
  }
  .work_date {
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: 20px;
    margin-top: -50px;
  }
  // .el-tabs /deep/ .el-tabs__content {
  //   // width: 5;
  //   height: 30px;
  // }
  #el-tab {
    margin-left: 30px;
  }
  .nodataImg {
    margin-top: 3%;
    margin-left: 35%;
  }
}
</style>
